<template>
  <div class="job-form">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="期望行业" prop="industry" v-if="industryList.length > 0">
        <el-select v-model="ruleForm.industry" placeholder="请选择行业"
        style="width:100%" :multiple="true" :multiple-limit="2">
          <el-option v-for="item in industryList" :key="item.value"
          :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="期望职位" prop="position">
        <el-select v-model="ruleForm.position" placeholder="请选择期望职位"
        style="width:100%" :multiple="true" :multiple-limit="2">
          <el-option v-for="item in positionList" :key="item.value"
          :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工作城市" prop="city">
        <el-select v-model="ruleForm.city" placeholder="请选择期望城市"
        style="width:100%" :multiple="true" :multiple-limit="2">
          <el-option v-for="item in cityList" :key="item.value"
          :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="公司规模" prop="scale">
        <el-select v-model="ruleForm.scale" placeholder="请选择期望规模" style="width:100%">
          <el-option v-for="item in scaleList" :key="item.value"
          :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="期望薪资" prop="salary">
        <el-select v-model="ruleForm.salary" placeholder="请选择期望薪资" style="width:100%">
          <el-option v-for="item in salaryList" :key="item.value"
          :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="社保" prop="ensure">
        <el-radio-group v-model="ruleForm.ensure">
          <el-radio v-for="item in ensureList" :key="item.value" :label="item.value">
            {{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">
          {{userItem?'编辑':'立即创建'}}
        </el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import OptionsData from '@/utils/optionsData';
// import OptionsApi from '@/api/options';
import jobIntentionApi from '@/api/jobIntention';

export default {
  name: 'JobForm',
  props: [
    'dialogVisible',
    'userItem',
    'industryList',
    'positionList',
    'cityList',
    'scaleList',
    'salaryList',
    'ensureList',
  ],
  data() {
    return {
      ruleForm: {
        industry: this.userItem ? this.userItem.industry.map(i => i.value) : '',
        position: this.userItem ? this.userItem.position.map(i => i.value) : '',
        city: this.userItem ? this.userItem.citys.map(i => i.value) : '',
        scale: this.userItem ? this.userItem.scale.value : '',
        salary: this.userItem ? this.userItem.salary.value : '',
        ensure: this.userItem ? this.userItem.ensure.value : '',
      },
      rules: {
        industry: [
          { required: true, message: '请输入期望行业', trigger: 'blur' },
        ],
        position: [
          { required: true, message: '请输入期望职位', trigger: 'blur' },
        ],
        city: [{ required: true, message: '请输入期望城市', trigger: 'blur' }],
        salary: [
          { required: true, message: '请输入期望薪资', trigger: 'blur' },
        ],
        ensure: [
          { required: true, message: '请选择期望社保类型', trigger: 'blur' },
        ],
      },
    };
  },
  mounted() {
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.userItem) {
            this.ruleForm.id = this.userItem.id;
            jobIntentionApi.putUser(this.ruleForm)
              .then((data) => {
                if (data.data) {
                  this.$message({
                    message: data.message,
                    type: 'success',
                  });
                  this.resetForm('ruleForm');
                  this.$emit('update:dialogVisible', false);
                } else {
                  this.resetForm('ruleForm');
                  this.$emit('update:dialogVisible', false);
                  this.$message({
                    message: `${data.message}`,
                    type: 'error',
                  });
                }
              })
              .catch((err) => {
                this.$message({
                  message: `${err.message}`,
                  type: 'error',
                });
              });
          } else {
            jobIntentionApi
              .postJob(this.ruleForm)
              .then((data) => {
                if (data.data) {
                  this.$message({
                    message: data.message,
                    type: 'success',
                  });
                  this.resetForm('ruleForm');
                  this.$emit('update:dialogVisible', false);
                } else {
                  this.$message({
                    message: data.message,
                    type: 'error',
                  });
                }
              })
              .catch((err) => {
                this.$message({
                  message: err.message,
                  type: 'error',
                });
              });
          }
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  watch: {
    userItem() {
      if (this.userItem) {
        this.ruleForm.industry = this.userItem.industry.map(i => i.value);
        this.ruleForm.position = this.userItem.position.map(i => i.value);
        this.ruleForm.city = this.userItem.citys.map(i => i.value);
        this.ruleForm.scale = this.userItem.scale.value;
        this.ruleForm.salary = this.userItem.salary.value;
        this.ruleForm.ensure = this.userItem.ensure.value;
      } else {
        this.ruleForm.industry = '';
        this.ruleForm.position = '';
        this.ruleForm.city = '';
        this.ruleForm.scale = '';
        this.ruleForm.salary = '';
        this.ruleForm.ensure = '';
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.job-form {
  width: 100%;
  height: auto;
}
</style>
